<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>
		<div>
			<div style="border:1px dashed #000000;padding: 20px 0;margin: 20px 0;">
				<ul id="demo"></ul>
			</div>
			<button id="but-1">添加节点</button>
			<button id="but-2">删除节点</button>
			<br /><br /><textarea id="textarea-1" style="width: 100%;height: 200px;padding: .5em;"></textarea>
			<script type="text/javascript">
				(function() {
					/*var nodes = [ //节点
						{
							name: '我的邮箱',
							id: 2,
							check: true, //选中
							spread: true, //展开
							children: [{
								name: 'QQ邮箱',
								id: 21,
								check: true, //选中
								spread: true, //展开
								children: [{
									name: '收件箱',
									id: 211,
									children: [{
										name: '所有未读',
										id: 2111
									}, {
										name: '置顶邮件',
										id: 2112
									}, {
										name: '标签邮件',
										id: 2113
									}]
								}, {
									name: '已发出的邮件',
									id: 212
								}, {
									name: '垃圾邮件',
									id: 213
								}]
							}, {
								name: '阿里云邮',
								id: 22,
								children: [{
									name: '收件箱',
									id: 221
								}, {
									name: '已发出的邮件',
									id: 222
								}, {
									name: '垃圾邮件',
									id: 223
								}]
							}]
						},
						{
							name: '常用文件夹',
							id: 1,
							alias: 'changyong',
							children: [{
								name: '所有未读',
								id: 11,
								href: 'http://www.layui.com/',
								alias: 'weidu'
							}, {
								name: '置顶邮件',
								id: 12,
								check: true, //选中
							}, {
								name: '标签邮件',
								id: 13
							}]
						}
					];*/

					//或json数组转json树状结构 
					var jsonData = [{
							name: '常用文件夹',
							id: 1,
							alias: 'changyong',
							spread: true,
						},
						{
							pid: 1,
							id: 11,
							status: 1,
							name: '所有未读<span style="color: red;">(定义为文件夹)</span>',
							href: 'http://www.layui.com/',
							alias: 'weidu',
							type: 'branch',
						},
						{
							pid: 1,
							id: 12,
							status: 3,
							name: '置顶邮件',
							check: true
						},
						{
							pid: 1,
							id: 13,
							status: 2,
							name: '标签邮件'
						},
						{
							id: 2,
							name: '我的邮箱',
							check: true,
							spread: true
						},
						{
							pid: 2,
							id: 21,
							status: 1,
							name: 'QQ邮箱<span style="color: red;">(定义为文件)</span>',
							check: true,
							spread: true,
							type: 'leaf',
						},
						{
							pid: 21,
							id: 211,
							status: 1,
							name: '收件箱',
						},
						{
							pid: 211,
							id: 2111,
							status: 1,
							name: '所有未读'
						},
						{
							pid: 211,
							id: 2112,
							status: 2,
							name: '置顶邮件'
						},
						{
							name: '标签邮件',
							id: 2113,
							pid: 211
						},
						{
							name: '已发出的邮件',
							id: 212,
							pid: 21,
							status: 3
						},
						{
							name: '垃圾邮件',
							id: 213,
							pid: 21,
							status: 2
						}
					];
					var nodes = transData(jsonData, 'id', 'pid', 'children', 'status');
					//视图参数
					var treeArg = {
						elem: '#demo', //传入元素选择器
						check: 'checkbox', //带选项的树
						//check: 'radio', //带选项的树
						dblclick: 'click', //双击展开改为单击展开
						remove: true, //可删除
						add: true, //可添加
						edit: true, //可编辑
						click: function(node, _this, trees) {
							//console.log(node, _this, trees) //node即为当前点击的节点数据,_this当前节点<a>,trees为当前树
						},
						change: function(node, _this, trees) { //选项改变
							//console.log(node, _this);
							console.log("点击", node, ",查看nodes['check']:", node['check']);
							$('#textarea-1').text(JSON.stringify({
								'data': trees.nodes
							}));
						},
						removefn: function(node, _this, trees, seekArg) {
							console.log(node, _this, trees, seekArg)
							//删除,在nodes中删除当前项
							//seekArg[0].splice(seekArg[1], 1);
							//清空视图,重新渲染
							//$('#demo').html(''), tree(treeArg);

							layer.confirm("可js选择要不要删除,确定删除!",
								function(index, layero) {
									layer.close(index);
									//删除,在nodes中删除当前项
									seekArg[0].splice(seekArg[1], 1);
									//清空视图,重新渲染
									$('#demo').html('');
									tree(treeArg);
									$('#textarea-1').text(JSON.stringify({
										'data': trees.nodes
									}));
								},
								function(index, layero) {
									console.log(index, layero);
								}
							);
						},
						addfn: function(node, _this, trees) {
							//console.log(node, _this, trees)
							if(!node.children) {
								node.children = [];
							}
							//添加,在node中添加一项
							//node.children.push({
							//	name: '新添加...',
							//});
							//重新渲染
							//tree(treeArg);

							layer.prompt({
								title: '输入新添加名称，并确认',
							}, function(value, index) {
								layer.close(index); //手动关闭prompt层
								//添加,在node中添加一项
								node.children.push({
									name: value,
								});
								//重新渲染
								tree(treeArg);
								$('#textarea-1').text(JSON.stringify({
									'data': trees.nodes
								}));
							});

						},
						editfn: function(node, _this, trees) {
							layer.prompt({
								title: '输入新名称，并确认',
								value: node.name
							}, function(value, index) {
								layer.close(index); //手动关闭prompt层
								//alert(value); //得到value
								if(value != node.name) {
									node.name = value;
									_this.children('a').children('cite').html(value);
									/*
									//重新渲染
									$('#demo').html(''), tree(treeArg);
									*/
									$('#textarea-1').text(JSON.stringify({
										'data': trees.nodes
									}));
								}
							});
						},
						nodes: nodes
					};

					//渲染视图
					tree(treeArg);

					//外部添加
					$('#but-1').click(function() {
						var oNode = {
							name: '垃圾邮件垃圾邮件垃圾邮件垃圾邮件垃圾邮件垃圾邮件',
							id: 23
						}
						nodes[0]['children'].push(oNode);
						tree(treeArg);
						$('#textarea-1').text(JSON.stringify(nodes));
					})

					//外部删除
					$('#but-2').click(function() {
						nodes[0]['children'].pop();
						tree(treeArg);
						$('#textarea-1').text(JSON.stringify(nodes));
					})
				})()
			</script>
		</div>
		<br /><br /><br />
		<div>
			<div style="border:1px dashed #000000;padding: 20px 0;margin: 20px 0;">
				<ul id="demo-0" class="table-tree"></ul>
			</div>
			<script type="text/javascript">
				(function() {
					var jsonData = [{
							name: '常用文件夹',
							id: 1,
							alias: 'changyong',
							spread: true
						},
						{
							pid: 1,
							id: 11,
							status: 1,
							name: '所有未读',
							href: 'http://www.layui.com/',
							alias: 'weidu'
						},
						{
							pid: 1,
							id: 12,
							status: 3,
							name: '置顶邮件',
							check: true
						},
						{
							pid: 1,
							id: 13,
							status: 2,
							name: '标签邮件'
						},
						{
							id: 2,
							name: '我的邮箱',
							check: true,
							spread: true
						},
						{
							pid: 2,
							id: 21,
							status: 1,
							name: 'QQ邮箱',
							check: true,
							spread: true
						},
						{
							pid: 21,
							id: 211,
							status: 3,
							name: '收件箱',
						},
						{
							pid: 211,
							id: 2111,
							status: 1,
							name: '所有未读'
						},
						{
							pid: 211,
							id: 2112,
							status: 2,
							name: '置顶邮件'
						},
						{
							name: '标签邮件',
							id: 2113,
							pid: 211
						},
						{
							name: '已发出的邮件',
							id: 212,
							pid: 21,
							status: 1
						},
						{
							name: '垃圾邮件',
							id: 213,
							pid: 21,
							status: 2
						}
					];

					var nodes0 = transData(jsonData, 'id', 'pid', 'children', 'status');

					//视图参数
					var treeArg = {
						elem: '#demo-0',
						check: 'checkbox', //带选项的树
						//dblclick: 'click', //双击展开改为单击展开
						//click: function(node, _this, trees) {},
						templet: function(d) {
							return '<span><i class="table-check layui-icon"></i>id:' + d.id + '</span><span><i class="table-spread layui-icon"></i>name:' + d.name + '</span><span>pid:' + (d.pid ? d.pid : '0') + '</span>';
						},
						nodes: nodes0
					};

					tableTree(treeArg); //添加tree改为table-tree相关方法

					tree(treeArg); //渲染视图
				})()
			</script>

		</div>
	</body>

</html>